<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel=stylesheet href="https://s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css">
    <link rel="stylesheet" type="text/css" href="./main.css">
    <link rel="stylesheet" type="text/css" href="./code.css">
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <script src="./index.js"></script>
    <script src="http://localhost:35729/livereload.js"></script>
    <title><%- title %></title>
</head>

<% function renderToc(items) { %>
<% for (item of items) { %>
<ol>
    <li><a class="toc-item" href="#<%= item.id %>"><%= item.text %></a>
    </li>
    <% if (item.children.length > 0) { %>
    <%- renderToc(item.children) %>
    <% } %>
</ol>
<% } %>
<% } %>

<body>

    <div id='header'>
        <div class='header-inside'>
            <div class='title-left'>
                <div class='title-wrapper'>
                    <div class='title'>Learn Makefiles</div>
                    <div class='subtitle'>With the tastiest examples</div>
                </div>

                <div class='intro-buttons'>
                    <a href='#getting-started'>Start the Tutorial</a>
                    <a href='http://localhost:8000/#makefile-cookbook'>Makefile Cookbook</a>
                </div>
                <div class='social-buttons'>
                    <a href='https://github.com/theicfire/makefiletutorial'><img src='/assets/github.png' /></a>
                    <a href='https://twitter.com/chaselambda'><img src='/assets/twitter.png' /></a>
                    <span class='github-stars'><a class="github-button"
                            href="https://github.com/theicfire/makefiletutorial" data-icon="octicon-star"
                            data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</a></span>
                </div>
            </div>
            <img class='title-pic' src='/assets/pie_ingredients.png' />
        </div>
    </div>
    <div class='body-wrapper'>
        <div id="left">
            <div class="sidebar-header">
                <div class='sidebar-title'><a href='#top'>Makefile Tutorial</a></div>
                <div class='social-buttons'>
                    <a href='https://github.com/theicfire/makefiletutorial'><img src='/assets/github.png' /></a>
                    <a href='https://twitter.com/chaselambda'><img src='/assets/twitter.png' /></a>
                    <span class='github-stars'><a class="github-button"
                            href="https://github.com/theicfire/makefiletutorial" data-icon="octicon-star"
                            data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</a></span>
                </div>
            </div>
            <div class='toc'>
                <% if (toc) { %>
                <%- renderToc(toc) %>
                <% } %>
            </div>
        </div>
        <div id="right">
            <div class="content">
                <%- contents %>
            </div>
        </div>
    </div>

</body>

</html>